<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>广州市气象台综合业务平台</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
</head>

<body>
	<div id="desktop">
    	<!-- 顶部标题 begin -->
        <div id="title-bar">
        	<span>广州市气象台综合业务平台</span>
        </div>
        <!-- 顶部标题 end -->
        
        <!-- 左边导航栏 begin -->
        <div id="left-bar">
        	<div id="dockContainer">
            	<ul class="menu">
                	<li>
                    	<a href="#">
                    		<img src="./icon/icon1.png"/>
                            <span>探测资料</span>
                    	</a>
                        <div class="sec-menu-area hide">
                        	<ul class="sec-menu">
                            	<li>
                                	<a href="#">图像形式显示</a>
                                    <div class="thr-menu-area hide">
                                    	<ul class="thr-menu">
                                    		<li><a href="#">WEBSWAN</a></li>
                                    	</ul>  
                                    </div>
                                </li>
                                <li>
                                	<a href="#">图像形式显示</a>
                                    <div class="thr-menu-area hide">
                                    	<ul class="thr-menu">
                                    		<li><a href="#">WEBSWAN</a></li>
                                            <li><a href="#">WEBSWAN</a></li>
                                            <li><a href="#">WEBSWAN</a></li>
                                    	</ul>  
                                    </div>
                                </li>
                                <li>
                                	<a href="#">图像形式显示</a>
                                    <div class="thr-menu-area hide">
                                    	<ul class="thr-menu">
                                    		<li><a href="#">WEBSWAN</a></li>
                                    	</ul>  
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                    	<a href="#">
                    		<img src="./icon/icon1.png"/>
                            <span>制作参考</span>
                    	</a>
                        <div class="sec-menu-area hide">
                        	<ul class="sec-menu">
                            	<li>
                                	<a href="#">图像形式显示</a>
                                    <div class="thr-menu-area hide">
                                    	<ul class="thr-menu">
                                    		<li><a href="#">WEBSWAN</a></li>
                                    	</ul>  
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                    	<a href="#">
                    		<img src="./icon/icon1.png"/>
                            <span>产品监控</span>
                    	</a>
                        <div class="sec-menu-area hide">
                        	<ul class="sec-menu">
                            	<li>
                                	<a href="#">图像形式显示</a>
                                    <div class="thr-menu-area hide">
                                    	<ul class="thr-menu">
                                    		<li><a href="#">WEBSWAN</a></li>
                                    	</ul>  
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                    	<a href="#">
                    		<img src="./icon/icon1.png"/>
                            <span>产品展示</span>
                    	</a>
                        <div class="sec-menu-area hide">
                        	<ul class="sec-menu">
                            	<li>
                                	<a href="#">图像形式显示</a>
                                    <div class="thr-menu-area hide">
                                    	<ul class="thr-menu">
                                    		<li><a href="#">WEBSWAN</a></li>
                                    	</ul>  
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                    	<a href="#">
                    		<img src="./icon/icon1.png"/>
                            <span>评分系统</span>
                    	</a>
                        <div class="sec-menu-area hide">
                        	<ul class="sec-menu">
                            	<li>
                                	<a href="#">图像形式显示</a>
                                    <div class="thr-menu-area hide">
                                    	<ul class="thr-menu">
                                    		<li><a href="#">WEBSWAN</a></li>
                                    	</ul>  
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                    	<a href="#">
                    		<img src="./icon/icon1.png"/>
                            <span>业务发布</span>
                    	</a>
                        <div class="sec-menu-area hide">
                        	<ul class="sec-menu">
                            	<li>
                                	<a href="#">图像形式显示</a>
                                    <div class="thr-menu-area hide">
                                    	<ul class="thr-menu">
                                    		<li><a href="#">WEBSWAN</a></li>
                                    	</ul>  
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                    	<a href="#">
                    		<img src="./icon/icon1.png"/>
                            <span>检索统计</span>
                    	</a>
                        <div class="sec-menu-area hide">
                        	<ul class="sec-menu">
                            	<li>
                                	<a href="#">图像形式显示</a>
                                    <div class="thr-menu-area hide">
                                    	<ul class="thr-menu">
                                    		<li><a href="#">WEBSWAN</a></li>
                                    	</ul>  
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                    	<a href="#">
                    		<img src="./icon/icon1.png"/>
                            <span>预报制作</span>
                    	</a>
                        <div class="sec-menu-area hide">
                        	<ul class="sec-menu">
                            	<li>
                                	<a href="#">图像形式显示</a>
                                    <div class="thr-menu-area hide">
                                    	<ul class="thr-menu">
                                    		<li><a href="#">WEBSWAN</a></li>
                                    	</ul>  
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="setting-btn">
                    	<a href="#">
                    		<img src="./icon/icon1.png"/>
                            <span></span>
                    	</a>
                        <div class="sec-menu-area hide">
                        	<ul class="sec-menu">
                            	<li>
                                	<a href="#">图像形式显示</a>
                                    <div class="thr-menu-area hide">
                                    	<ul class="thr-menu">
                                    		<li><a href="#">WEBSWAN</a></li>
                                    	</ul>  
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 左边导航栏 end -->
        
        <!-- 右边导航栏 begin -->
        <div id="right-bar">
        	<div class="widget-container">
        		<div id="weather">
        		
        			<div class="info">
        				<div class="ico">
        					<img width="43" src="images/weather-ico.gif" />
        					
        				</div>
        				<div class="left-con">
        					<p class="city">广州</p>
        					<p>06月17日 周日</p>
        				</div>
        			</div>
        			<div class="detail">
        				<span>21~27℃</span>
        				<span>多云 微风</span>
        			</div>
        		
        		</div>
        		<canvas id="clock" width="130" height="130" style="border:none; top: +200px;">
        		<script>
		    gfc={  
        ctx:null,  
        canvasId:"clock",  
        radius:55,  
        originPoint:[65,65],  
        init:function(){  
          var canvas = document.getElementById(gfc.canvasId);  
          if(canvas.getContext){  
            gfc.ctx=canvas.getContext('2d');  
          }  
          else{  
            gfc.ctx=G_vmlCanvasManager.initElement(canvas).getContext(); //兼容IE的脚本  
          }  
          var t=window.setInterval("gfc.drawClock()","100");  
        },  
        drawClock:function(){  
            gfc.ctx.save();  
            gfc.ctx.translate(gfc.originPoint[0],gfc.originPoint[1]);  
            gfc.ctx.beginPath();  
            gfc.ctx.fillStyle = '#000000';
			gfc.ctx.strokeStyle = '#000000';
			gfc.ctx.lineWidth = 20;  
            gfc.ctx.arc(0,0,gfc.radius,0,Math.PI*2,true);  
            gfc.ctx.stroke();  
            gfc.ctx.fillStyle="#ffffff";  
            gfc.ctx.arc(0,0,gfc.radius-50,0,Math.PI*2,true);  
            gfc.ctx.fill();  
            gfc.ctx.fillStyle="#000000";  
            for(var i=0;i<60;i++)  
            {  
                gfc.ctx.save();  
                gfc.ctx.rotate(Math.PI*2/60*i);  
                if(i%5==0){  
                    gfc.ctx.fillRect(30,-2,20,4);  
                }  
                else{  
                    gfc.ctx.fillRect(40,-1,10,2);  
                }  
                gfc.ctx.restore();  
            }  
            gfc.getTime();//获取当前时间  
            gfc.ctx.rotate(Math.PI/2*3);  
            gfc.drawHourHand();  
            gfc.drawMinuteHand();  
            gfc.drawSecondHand();  
            gfc.drawOrigin();  
            gfc.ctx.restore();  
        },
        drawHourHand:function(){
            var Hour=gfc.hour%12;  
            var Offset=(Math.PI*2/60)*Math.floor(gfc.minute/12);  
            gfc.ctx.save();
            gfc.ctx.rotate(Hour*Math.PI*2/12+Offset);
            gfc.ctx.fillRect(-20,-3,50,6);  
            gfc.ctx.restore();  
        },  
        drawMinuteHand:function(){  
            gfc.ctx.save();  
            gfc.ctx.rotate(gfc.minute*Math.PI*2/60);  
            gfc.ctx.fillRect(-20,-2,60,4);  
            gfc.ctx.restore();  
        },  
        drawSecondHand:function(){  
            gfc.ctx.save();  
            gfc.ctx.rotate(gfc.second*Math.PI*2/60);  
            gfc.ctx.fillStyle = '#000000';  
            gfc.ctx.fillRect(-25,-1,70,2);  
            gfc.ctx.beginPath();  
            gfc.ctx.arc(-27,0,6,0,Math.PI*2,true);  
            gfc.ctx.fill();  
            gfc.ctx.restore();  
        },
        drawOrigin:function(){
            gfc.ctx.fillStyle="#ffffff";  
            gfc.ctx.beginPath();  
            gfc.ctx.arc(0,0,2,0,Math.PI*2,true)  
            gfc.ctx.fill();  
        },
        getTime:function(){  
            var date=new Date();  
            gfc.hour=date.getHours();  
            gfc.minute=date.getMinutes();  
            gfc.second=date.getSeconds();  
        }
    }  
    //启动时钟  
    gfc.init();  
    </script>
        	</div>
        </div>
        <!-- 右边导航栏 end -->
        
        <!-- 下方工具条 begin -->
        <div id="bottom-bar">
        	<!-- 登陆后三个按钮 begin -->
        	<div class="tool-container" style="display:none;">
        		<ul class="tool-fir-menu">
        			<li>
        				<span><a class="rai-btn pink-btn">观测资料</a></span>
        				<ul class="tool-sec-menu hide">
        					<li>
        						<a>天气预报</a>
        						<ul class="tool-thr-menu hide">
        							<li><a>广州天气新浪微博</a></li>
        							<li><a>广州天气新浪微博</a></li>
        							<li><a>广州天气新浪微博</a></li>
        						</ul>
        					</li>
        					<li>
        						<a>天气警报</a>
        					</li>
        					<li>
        						<a>决策服务</a>
        					</li>
        				</ul>
        			</li>
        			<li><span><a class="rai-btn green-btn">数值<br/>预报</a></span></li>
        			<li><span><a class="rai-btn blue-btn">预报<br/>服务</a></span></li>
        		</ul>
        	</div>
        	<!-- 登陆后三个按钮 end -->
        	
        	<!-- 登录窗口 begin -->
        	<div class="login-panel">
        		<div class="close-btn">关闭</div>
        		<div class="ttl">
        			<h3>预报员登录</h3>
        		</div>
        		<div class="content">
        			<form action="" method="post">
        				<label>用户名:</label>
        				<input type="text" value="" name="username"  />
        				<label style="margin-left:10px;">密码:</label>
        				<input type="password" value="" name="password" />
        				<button style="margin-left:5px;" type="submit"><span>登录</span></button>
        			</form>
        		</div>
        	</div>
        	<!-- 登录窗口 end -->
        </div>
        <!-- 下方工具条 end -->
        
    </div>
    
    <!-- 浏览器 begin -->
    <div id="web-browser" class="hide">
    	<div class="close-btn"></div>
    	<iframe id="browser" src="" scrolling="auto">
    
    	</iframe>
    </div>
    <!-- 浏览器 end -->
    
    <script type="text/javascript">
		$(document).ready(function() {
			//第一级菜单事件
			$('#left-bar #dockContainer .menu > li').click(function() {
				$('#left-bar #dockContainer .menu > li').removeClass('hover');
				$(this).addClass('hover');
				
			});
			
			//第二级菜单事件
			$('#left-bar #dockContainer .sec-menu > li').click(function() {
				$('#left-bar #dockContainer .sec-menu > li').removeClass('hover');
				$(this).addClass('hover');
			});
			
			//第三级菜单事件
			$('#left-bar #dockContainer .thr-menu > li a').click(function(event) {
				var url = $(this).attr('label');
				//先显示iframe的浏览窗口
				$('#web-browser').removeClass('hide').addClass('show');
				$('#browser').attr('src', url);
				$('#left-bar #dockContainer .menu li').removeClass('hover');
				event.stopPropagation();//阻止事件冒泡
			});
			
			//内部浏览器关闭按钮
			$('#web-browser .close-btn').click(function() {
				$('#web-browser').removeClass('show').addClass('hide');
			});
			
			//设置内部浏览器在中间
			function fitBrowserPosition() {
				var windowWidth = $(window).width();
				var webBrowserWidth = $('#web-browser').width();
				var leftOffset = (windowWidth - webBrowserWidth) / 2;
				$('#web-browser').css({left:leftOffset + 'px'});
			}
			fitBrowserPosition()
			
			//下方按钮一级菜单
			$('#bottom-bar .tool-container .tool-fir-menu > li').click(function(event) {
				$('#bottom-bar .tool-container .tool-fir-menu > li').removeClass('hover');
				$(this).addClass('hover');
				fitBottomMenuWidth('#bottom-bar .tool-container .tool-fir-menu .tool-sec-menu');
				fitBottomMenuPositon($(this), '#bottom-bar .tool-container .tool-fir-menu > li .tool-sec-menu');
			});
			
			//下方二级按钮
			$('#bottom-bar .tool-container .tool-fir-menu .tool-sec-menu > li').click(function(event) {
				$('#bottom-bar .tool-container .tool-fir-menu .tool-sec-menu > li').removeClass('hover');
				$(this).addClass('hover');
				fitBottomMenuWidth('#bottom-bar .tool-container .tool-fir-menu .tool-sec-menu .tool-thr-menu');
				fitBottomMenuPositon($(this), '#bottom-bar .tool-container .tool-fir-menu .tool-sec-menu > li .tool-thr-menu');
				event.stopPropagation();//阻止事件冒泡
			});
			
			//下方三级按钮
			$('#bottom-bar .tool-container .tool-fir-menu .tool-sec-menu .tool-thr-menu').click(function (event) {
				var url = $(this).attr('label');
				$('#web-browser').removeClass('hide').addClass('show');
				$('#browser').attr('src', url);
				$('#bottom-bar .tool-container li').removeClass('hover');
				event.stopPropagation();//阻止事件冒泡
			});
			
			//调整下方菜单宽度
			function fitBottomMenuWidth(selector) {
				var elementWidth = $(selector + ' > li').outerWidth();
				var elementLength = $(selector + ' > li').length;
				var menuWidth = elementWidth * elementLength;
				$(selector).css({width:menuWidth + 'px'});
			}
			
			//调整下方菜单位置
			function fitBottomMenuPositon(refElement, operElement) {
				var refElementOffset = refElement.offset();
				var refElementWidth = refElement.width();
				var operElementWidth = $(operElement).width();
				var leftOffset = (refElementWidth / 2) - (operElementWidth / 2);
				$(operElement).css({left:leftOffset + 'px'});
			}
			
			//设置-弹出窗
			$('#left-bar .setting-btn').unbind('click');
			$(document).ready(function () {
				$('#setting-dialog').dialog({
					autoOpen: false,
					resizable:false,
					minWidth:555,
					maxWidth:555
				});
				
				$('#left-bar .setting-btn').click(function() {
					$('#setting-dialog').dialog( "open" );
					return false;
				});
			});
			
			//设置-弹出窗，切换
			$('#setting-dialog .toggle-bar span').click(function() {
				var index = $(this).index();
				$('#setting-dialog .content .num').hide();
				$('#setting-dialog .content .num-' + index).show();
				
				$('#setting-dialog .toggle-bar span').removeClass('activ');
				$(this).addClass('activ');
			});
			
			//小部件设置-天气
			$('#weather-button').click(function() {
				if ($(this).attr('checked')) {
					$('#weather').show();
				}
				else {
					$('#weather').hide();
				}
			});
			
			//小部件设置-时钟
			$('#clock-button').click(function() {
				if ($(this).attr('checked')) {
					$('#clock').show();
				}
				else {
					$('#clock').hide();
				}
			});
		});
	</script>
	
	<!-- 设置弹出窗 begin -->
	<div id="setting-dialog" class="setting-dialog" title="设置">
		<div class="toggle-bar">
			<span class="activ">系统主题</span>
			<span>自定义</span>
		</div>
		<div class="content">
			<div class="num-0 num">
				<ul class="wallpapers">
					<li>
						<img src="wallpapers/menglong2.jpg" width="145"/>
						<a href="#">银色科幻</a>
					</li>
					<li>
						<img src="wallpapers/menglong2.jpg" width="145"/>
						<a href="#">银色科幻</a>
					</li>
					<li>
						<img src="wallpapers/menglong2.jpg" width="145"/>
						<a href="#">银色科幻</a>
					</li>
					<li>
						<img src="wallpapers/menglong2.jpg" width="145"/>
						<a href="#">银色科幻</a>
					</li>
					<li>
						<img src="wallpapers/menglong2.jpg" width="145"/>
						<a href="#">银色科幻</a>
					</li>
					<li>
						<img src="wallpapers/menglong2.jpg" width="145"/>
						<a href="#">银色科幻</a>
					</li>
					<li>
						<img src="wallpapers/menglong2.jpg" width="145"/>
						<a href="#">银色科幻</a>
					</li>
					<li>
						<img src="wallpapers/menglong2.jpg" width="145"/>
						<a href="#">银色科幻</a>
					</li>
					<li>
						<img src="wallpapers/menglong2.jpg" width="145"/>
						<a href="#">银色科幻</a>
					</li>
					<li>
						<img src="wallpapers/menglong2.jpg" width="145"/>
						<a href="#">银色科幻</a>
					</li>
					<li>
						<img src="wallpapers/menglong2.jpg" width="145"/>
						<a href="#">银色科幻</a>
					</li>
					<li>
						<img src="wallpapers/menglong2.jpg" width="145"/>
						<a href="#">银色科幻</a>
					</li>
				</ul>
			</div>
			
			<div class="num-1 num hide">
				<div class="item-title">桌面小部件设置</div>
				<div class="item-body">
					<input type="checkbox" checked="checked" id="weather-button" /><label for="weather-button">今日天气</label>
					<input type="checkbox" checked="checked" id="clock-button" /><label for="clock-button">时钟</label>
				</div>
			</div>
		</div>
	</div>
	<!-- 设置弹出窗 end -->
</body>
</html>
